/*.page-1{ background-color:#083846;}
.page-2{ background-color:#9261BF;}
.page-3{ background-color:#F3533C;}
.page-4{ background-color:#FFBF50;}*/
#page-content { }
.page,.startpages{
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	transform-origin: center bottom; 
	 -webkit-transform-origin: center bottom; 
	 -moz-transform-origin: center bottom; 
	 -o-transform-origin: center bottom; 
	 
}
.startpages { z-index:999}
 
.share,.sharebg{
	display: none;
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%; z-index:9999;
}
.sharebg {    background: none repeat scroll 0 0 #000;
    opacity: 0.5;
    z-index: 9998;}
.share {width:164px; height:128px; background:url(../img/share.png) right top no-repeat; background-size:100%;  right:10px; top:10px; left:auto}
.btn-group{
  position: absolute;
  top:40%;
  text-align: center;
  width:50%;
  margin:0 auto; left:0; right:0
}
.btn-group a{
  display: inline-block;
  margin-left: -20px;
}
.btn-group a img{
  width: 160px;
  height: auto;
}

/* loading */
#loading{
	display:block;
	position:absolute;
	left:0; 
	top:0;
	width: 100%;
	height: 100%;
	color:white;
	background: #5fc4d6;
	font-size: 1em;
	text-align: center;
	overflow:hidden;
	z-index: 9999;
}

.spinner {
  margin: 0 auto;
  width: 60px;
  height: 60px;
  position: relative;
  top:40%;
}
 
.container1 > div, .container2 > div, .container3 > div {
  width: 15px;
  height: 15px;
  background-color: #fff;
  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
 
.spinner .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
 
.container2 {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}
 
.container3 {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}
 
.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }
 
.container2 .circle1 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
 
.container3 .circle1 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
.container1 .circle2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
 
.container2 .circle2 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
 
.container3 .circle2 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
 
.container1 .circle3 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
 
.container2 .circle3 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
 
.container3 .circle3 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
 
.container1 .circle4 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
 
.container2 .circle4 {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
 
.container3 .circle4 {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
/*JS定义页面大小*/
.arealayer { position:relative; width:100%; height:100%; margin:0 auto}
.pagearrow,.pagearrow2 {position:absolute; bottom:0 ; left:0; right:0; margin-left:auto; margin-right:auto}
.pagearrow { width:40px; height:40px; background:url(../img/arrowtop.png) left top; background-size:100% 100%; bottom:25px; z-index:99}
.pagearrow2 { width:80px; height:80px; background:url(../img/arrowtop2.png) left top; background-size:100% 100%; bottom:5px; z-index:98}

.home {position:absolute; left:0; right:0; background-position:0 0; background-repeat:no-repeat; background-size:100%;   margin:0 auto; text-align:center; width:100%; height: auto; z-index:10}
.floatcenter {position:absolute; left:0; right:0; margin-left:auto; margin-right:auto}


.tan { position:absolute; left:1px; top:1px; background:url(../img/tan.png) left top no-repeat; background-size:100% 100%; width:40px; height:38px; z-index:99}
.page-1 { background:#3E4866}

.home1 { z-index:11; top:8%;width:185px; height:62px; left:0; right:0}
.home1 .t1 { background:url(../img/page1t1.png) left top no-repeat; background-size:cover;  top:-25px; width:64px; height:51px;}
.home1 .t2 { background:url(../img/page1t2.png) left top no-repeat; background-size:cover;width:185px; height:62px;margin-left:auto; margin-right:auto}
.home1 .t3 { background:url(../img/page1t3.png) left top no-repeat; background-size:cover;bottom: -70px; width:147px; height:52px;  }

.home2 { z-index:12; top:35%; }
.bgcircle{width:176px; height:176px; background:url(../img/bg-yuan.png) left top; background-size:cover;}
.bgcircle.bigfasan { width:350px; height:350px;background:url(../img/bg-she.png) left top; background-size:cover; top:20%}
.pageend .bgcircle.bigfasan  { top:-5%}
.bgcircle.bigfasan .tbg {width:176px; height:176px; background:url(../img/bg-yuan.png) left top; background-size:cover; top:80px;  }
.pageend .bgcircle.bigfasan {}
.home2 .t1 { width:137px; height:68px; z-index:86; background:url(../img/libody.png) left top no-repeat; background-size:100% 100%; bottom:40px; margin-left:20px;}
.home2 .t2 {width:59px; height:78px; z-index:90; background:url(../img/lihead.png) left top no-repeat; background-size:100% 100%; bottom:82px;margin-left:65px; transform-origin: center bottom;-webkit-transform-origin: center bottom;}
.bgcircle.bigfasan .t1 {bottom:130px; margin-left:110px;}
.bgcircle.bigfasan .t2 { bottom:172px;margin-left:155px;}

.home3 { z-index:13; width:60%; top:55%; background:url(../img/jizhe.png) left top no-repeat; background-size:100%; width:358px; height:324px;} 


.page-2 {}
.zhezhi {  width:100%; margin-left:auto; margin-right:auto; height:100%; margin-top:0; position:relative}
.zhezhi .z1 { background:#D91718; width:50%;height:200px;left:0; right:auto; display:block; position:absolute; }
.zhezhi .z1 img { margin-top:60px; width:70%;}
.zhezhi .z2 { background:#6B1217; width:50%;height:200px;right:0; left:auto; display:block; position:absolute}
.zhezhi .z2 img { margin-top:20px; width:80%;}
.zhezhi .z3 { background:#EA5D5C; width:100%; height:100%; top:200px;  display:block; position:absolute}
.zhezhi .z3 img { margin-top:40px; width:80%;  }

.page-6 .zhezhi .z2 img{width: 60%;}
.page-7 .zhezhi .z2 img{width: 60%;}
.page-8 .zhezhi .z2 img{ margin-top:60px; width:100% }
.page-9 .zhezhi .z2 img{width: 60%;}


.page-3 .zhezhi .z1,.page-7 .zhezhi .z1 {background:#17489D;}
.page-3 .zhezhi .z2,.page-7 .zhezhi .z2 {background:#69C2EE;}
.page-3 .zhezhi .z3,.page-7 .zhezhi .z3 {background:#1D77BB;}

.page-4 .zhezhi .z1,.page-8 .zhezhi .z1 {background:#F4C723;}
.page-4 .zhezhi .z2,.page-8 .zhezhi .z2  {background:#ED721F;}
.page-4 .zhezhi .z3,.page-8 .zhezhi .z3  {background:#DE883C;}

.page-5 .zhezhi .z1,.page-9 .zhezhi .z1  {background:#A7D0B1;}
.page-5 .zhezhi .z2,.page-9 .zhezhi .z2  {background:#297F6F;}
.page-5 .zhezhi .z3,.page-9 .zhezhi .z3  {background:#425854;}
 
.page-10 .zhezhi .z1  {background:#692820;}
.page-10 .zhezhi .z2 {background:#A06150;}
.page-10 .zhezhi .z3 {background:#804027;}



.clickpage { background:#33BAED}
.clickpage .cp1 { background:url(../img/zantext.png) left top no-repeat; width:70%; height:150px; background-size: 100%; top:5%}
.clickpage .cp3 {  width:50px; height:50px;  top:70%; z-index:98}
.clickpage .cp3.notclick { background:url(../img/zan-null.png) left top no-repeat; width:50px; height:50px; background-size:100% 100%; top:70%}
.clickpage .cp3.on  { background:url(../img/zan-ok.png) left top no-repeat;  background-size:100% 100%;}
.clickpage .cp4 {  width:165px; height:140px;  top:40%; left:0; right:0; z-index:11; background:url(../img/allheart.png) left top no-repeat; background-size:100%;   opacity:0}

.pageend { background:#3D4763; }
.pageend .sharenum { width:80%; background:#31395D; top:50%; font-size:12px; color:#fff;margin-left:auto; margin-right:auto; padding:12px 20px; border-radius:8px;-webkit-border-radius:8px; font-family:"Heiti SC", "Microsoft YaHei", "Arial Unicode MS"; line-height:1.6em}
.pageend .btns { top:65%; width:70%;}
.pageend .btns .ftp1 { float:left}
.pageend .btns .ftp2 { float:right}

.a-name,.a-build,.a-map,.a-taps,.floatlayerbg,.floatlayer,.paihang{ position:absolute; left:0; right:0; background-position:0 0; background-repeat:no-repeat; background-size:100%;   margin:0 auto; text-align:center; width:100%; height:100%}
.shutdiv,.shareshutdiv { position:absolute; right:20px; top:20px; z-index:1001; width:40px; height:40px; background:url(../img/shut.png) 0 0 no-repeat; background-size:100%;}
.shareshutdiv {background:url(../img/end/share.png) 0 0 no-repeat; background-size:cover; width:20px; height:20px;}
.floatlayerbg,.floatlayer,.shutdiv,.paihang{ display:none}
.floatlayerbg,.floatlayer { z-index:999}
.floatlayerbg { background-size:cover}
.floatlayer { overflow:scroll; height: auto}
.floatlayer img { margin:0; padding:0; display:block}
.paihang { background-image: url(../img/homebg.jpg); background-size: cover; z-index:933}
.paihang .paitop,.paihang .pailist,.paihang .text { position:absolute; left:0; right:0;background-position:0 0; background-repeat:no-repeat; background-size:100%;   margin:0 auto; }
.paihang .paitop { background:url(../img/list/top.png) top left no-repeat; background-size: 100%; width:70%; height:200px; z-index:21; left:0%; top:3%; right:auto}
.paihang .text { background:url(../img/list/text.png) top left no-repeat; background-size: 100%; width:70%; bottom:0%; height:80px; z-index:21; }
.paihang .pailist { width:80%; margin:0 auto; z-index:23; height:290px; top:130px; text-align: left}
.paihang .pailist ul { margin:0; padding:0; position:relative}
.paihang .pailist li { height:50px; clear:both; float:none; margin-bottom:10px; position:relative}
.paihang .pailist li:first-child .headicon { background:url(../img/list/no1float.png) left top no-repeat; background-size:cover; height:30px; width:30px; position:absolute; left:-10px; top:-10px; z-index:99}
.paihang .pailist .licon { width:50px; height:50px; overflow:hidden; background-repeat:no-repeat; background-size:cover; float:left; position:absolute; left:0px; top:0px; z-index:23}
.paihang .pailist .rcont { margin-left:60px; margin-right:0px; color:#fff; font-size:14px;}
.paihang .pailist .rcont .lie { height:18px; margin-top:2px;}
.paihang .pailist .rcont .lie .pre{ display:block; background:RGB(109,207,246); width:60%; height:20px; float:left; margin-right:5px;}
 

.textread1,.textread2 { display:block; left:0; right:0;  position:absolute; width:80%; margin:auto}
.textread1 { top:30%;width:60%;}
.textread2 { bottom:2%; height:105px; }

.road_cloud {
position: absolute;
left: 0;
right: 0;
top:10px;
background: url(../img/hb/cloud.png) no-repeat;
background-size: 1300px auto;
height: 128px;
z-index: 10;
-webkit-animation: a_cloud 15s linear infinite;
}

.a-map .maptip.animation-maptip {opacity:1}
.a-build .js.animation-js {opacity:1}

.animation-maptip {

	-webkit-animation: bounces 1.2s ease-out;
	-moz-animation: bounces 1.2s ease-out;
	-o-animation: bounces 1.2s ease-out;
	animation: bounces 1.2s ease-out;
	opacity:1
 }
.animation-rotate {
	-webkit-animation: rotate 20s infinite linear;
	-moz-animation: rotate 36s infinite linear;
	-o-animation: rotate 36s infinite linear;
	animation: rotate 36s infinite linear;
	opacity:1
 }
.animation-js {

	-webkit-animation: bounces-up 1.2s ease-out;
	-moz-animation: bounces-up 1.2s ease-out;
	-o-animation: bounces-up 1.2s ease-out;
	animation: bounces-up 1.2s ease-out;
	opacity:1
 }

.animation-scale {
	-webkit-animation: scalebig 1.2s ease-out;
	-moz-animation: scalebig 1.2s ease-out;
	-o-animation: scalebig 1.2s ease-out;
	animation: scalebig 1.2s ease-out;
 } 
 
.animation-movehand {
	-webkit-animation: movehand 2s infinite linear;
	-moz-animation: movehand 2s infinite linear;
	-o-animation: movehand 2s infinite linear;
	animation: movehand 2s infinite linear;
 } 
/*针对小屏做处理*/
@media screen and (max-height:420px) {
	.bgcircle { width:150px; height:150px;}
.home3 { top:60%;background-size: 100%; width:100%;}
.home2 { top:42%}
.home2 .t1 {width: 137px;height: 68px; margin-left:0px;bottom: 20px;}
.home2 .t2 {width: 59px;height: 78px;margin-left: 45px;bottom: 62px;}
.home8 { bottom:100px}
.home7 { bottom:25px}
.home6 { bottom:30px}

.zhezhi .z1,.zhezhi .z2{ height:140px;}
.zhezhi .z3 { top:140px;}
.zhezhi .z1 img {margin-top: 40px;}
.zhezhi .z2 img {margin-top: 10px;width: 60%;}
.zhezhi .z3 img {margin-top: 10px;}
.page-3 .zhezhi .z2 img {margin-top: 20px;}
.page-8 .zhezhi .z2 img {margin-top: 30px;}
.page-7 .zhezhi .z2 img {width: 50%;}
.page-10 .zhezhi .z2 img {width: 80%;}

.clickpage .cp1 {width: 60%;height: 100px;}
.bgcircle.bigfasan {top: 3%;}
.clickpage .cp4 {top: 30%;}
.pageend .bgcircle.bigfasan {top: -20%;}
.pageend .sharenum { top:45%;padding: 8px 10px;width: 90%;}
.pageend .btns {top: 60%;}
}
 
@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}
 
@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
@-webkit-keyframes a_cloud{0%{background-position:-654px 0;}100%{background-position:0 0;}}
@keyframes a_cloud{0%{background-position:-654px 0;}100%{background-position:0 0;}}

@keyframes bounces {  
0% {transform:translateY(-200%); -webkit-transform:translateY(-200%); opacity:0   }
10% {transform:translateY(-100%);-webkit-transform:translateY(-100%);  opacity:1  } 
20% { transform:translateY(0);-webkit-transform:translateY(0); padding-bottom: 5px;opacity:1  } 
40% {transform:translateY(-30%);-webkit-transform:translateY(-30%); opacity:1  }  
60% {transform:translateY(0%);-webkit-transform:translateY(0%);     padding-bottom: 6px;opacity:1  }     
}  
@-webkit-keyframes bounces {  
0% {transform:translateY(-200%); -webkit-transform:translateY(-200%); opacity:0   }
10% {transform:translateY(-100%);-webkit-transform:translateY(-100%);  opacity:1  } 
20% { transform:translateY(0);-webkit-transform:translateY(0); padding-bottom: 5px;opacity:1  } 
40% {transform:translateY(-30%);-webkit-transform:translateY(-30%); opacity:1  }  
60% {transform:translateY(0%);-webkit-transform:translateY(0%);     padding-bottom: 6px;opacity:1  }   
}  

@keyframes bounces-up {  
0% {transform:translateY(100%);-webkit-transform:translateY(100%);   opacity:0  } 
40% {transform:translateY(-3%);-webkit-transform:translateY(-3%); opacity:1   }
100% {transform:translateY(0%);-webkit-transform:translateY(0%);opacity:1   }
}  
@-webkit-keyframes bounces-up {  
0% {transform:translateY(100%);-webkit-transform:translateY(100%);   opacity:0  } 
40% {transform:translateY(-3%%);-webkit-transform:translateY(-3%); opacity:1}
100% {transform:translateY(0%);-webkit-transform:translateY(0%);opacity:1   }
}  
@keyframes movehand {   
0%{ left:60%;opacity:0;} 
50% {left:50%; opacity:1;}
100% { left:40%;  opacity:0;} 
} 
@-webkit-keyframes movehand {  
0%{ left:60%;opacity:0;} 
50% {left:50%; opacity:1;}
100% { left:40%;  opacity:0;} 
} 
@keyframes rotate {
  from {transform:rotate(0deg);}
  to {transform:rotate(-360deg);}
}

@-webkit-keyframes rotate {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(-360deg);}
} 
.hidecontent { display:none}